<ui:composition template="/template.xhtml" xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:c="http://java.sun.com/jstl/core"
                xmlns:t="http://myfaces.apache.org/tomahawk"
                xmlns:a4j="http://richfaces.org/a4j">
    <ui:define name="customs">
        <link  rel="stylesheet" type="text/css" href="#{contextPath}/css/conteo.css" />
        <script type="text/javascript" src="#{contextPath}/js/autocomplete.js" language="javascript"/>
        <script type="text/javascript" src="#{contextPath}/counting/counting.js" language="javascript"/>
    </ui:define>
    <ui:define name="title">#{resource['countingParallel.edition']} - #{documentParallelBean.electionType.description}</ui:define>
    <ui:define name="main-content">
        <h:form id="docForm">
            <center><h:messages id="errorMessages" styleClass="messages" layout="table"/></center>

            <div id="top-info">
                <table id="top-table" width="100%">
                    <tr>
                        <td width="30%">
                            Depositados calculados: <h:outputText id="calcDepositedVotes" value="#{documentParallelBean.document.calcDepositedVotes}"/>
                        </td>
                        <td width="30%">
                            #{resource['counting.validCalc']}: <h:outputText id="calcValidVotes" value="#{documentParallelBean.document.validVotes}"/>
                        </td>
                        <td width="30%">
                            Muestra: <h:selectBooleanCheckbox disabled="true" title="Muestra" value="#{documentParallelBean.document.jrv.sample}"/> 
                        </td>                                        
                    </tr>
                </table>
            </div>  

            <div id="mun">                                 
                Jrv:                   
                <input type="text" id="autocomplete_jrv" name="autocomplete_jrv" />
                <div id="autocomplete_choices" class="autocomplete"></div>
                Centro:               
                <h:inputText id="ballotDesc" value="" size="40" disabled="true"/>
                Municipio:                                     
                <h:inputText id="townName" value="" size="30" disabled="true"/>
            </div> 
            <br/>
            <div id="content-casillas">
                <div id="casilla1"> 
                    <h:inputText id="votePlc" size="12" value="#{documentParallelBean.votePlc}" onkeypress="return validateNumber(event);" onblur="calc();"/>
                </div>
                <div id="casilla2"> 
                    <h:inputText id="voteFsln" size="12" value="#{documentParallelBean.voteFsln}" onkeypress="return validateNumber(event);" onblur="calc();"/> 
                </div>
                <div id="casilla4"> 
                    <h:inputText id="votePc" size="12" value="#{documentParallelBean.votePc}" onkeypress="return validateNumber(event);" onblur="calc();"/>
                </div>
                <div id="casilla8"> 
                    <h:inputText id="voteYatama" size="12" value="#{documentParallelBean.voteYatama}" onkeypress="return validateNumber(event);" onblur="calc();"/> 
                </div>
                <div id="casilla9"> 
                    <h:inputText id="voteAln" size="12" value="#{documentParallelBean.voteAln}" onkeypress="return validateNumber(event);" onblur="calc();"/>
                </div>
                <div id="casilla10"> 
                    <h:inputText id="votePrn" size="12" value="#{documentParallelBean.votePrn}" onkeypress="return validateNumber(event);" onblur="calc();"/> 
                </div>
                <div id="casilla13"> 
                    <h:inputText id="votePli" size="12" value="#{documentParallelBean.votePli}" onkeypress="return validateNumber(event);" onblur="calc();"/>
                </div>
            </div>
            <div id="datos">
                #{resource['counting.deposited']}<h:inputText id="depositedVotes" value="#{documentParallelBean.document.depositedVotes}" onchange="return calcNulls();"/>  
                #{resource['counting.valid']} <h:inputText id="validVotes" value="#{documentParallelBean.document.validVotes}" onchange="return calcNulls();"/> 
                #{resource['counting.nulls']} <h:inputText id="nullVotes" value="#{documentParallelBean.document.nullVotes}" onchange="return calcNullSingle();"/> 
                <label for="impugnada">Impugnada</label> 
                <h:selectBooleanCheckbox id="impugnada" title="Impugnada" value="#{documentParallelBean.document.impugnada}"/> 
                <label for="sinActa">Sin Acta</label> 
                <h:selectBooleanCheckbox id="sinActa" title="Sin Acta" value="#{documentParallelBean.document.withoutDoc}"/> 
            </div>
            <h2>Fiscales </h2>
            <table Id="tablafiscales" align="center">
                <tr>
                    <th>Ingrese nombre</th>
                    <th>Reportados</th>
                </tr>
                <tr>
                    <td width="25%">
                        <table width="100%">
                            <tr>
                                <td>
                                    <h:inputText id="fiscalName" value="#{documentParallelBean.fiscalName}"/>
                                    <div id="fiscal_choices" class="autocomplete"></div>
                                    <label for="fiscalName">
                                        <a4j:commandLink actionListener="#{documentParallelBean.addFiscal}"
                                                         oncomplete="cleanFiscalName();"
                                                         reRender="tbFiscals">
                                            <img src="#{contextPath}/images/add-button-square.jpg"/>
                                        </a4j:commandLink>
                                    </label>
                                </td>
                            </tr>
                        </table>  
                    </td>
                    <td>
                        <t:dataTable id="tbFiscals" value="#{documentParallelBean.fiscals}" var="fiscal" 
                                     renderedIfEmpty="true" rowIndexVar="indx"
                                     newspaperColumns="4" newspaperOrientation="horizontal">
                            <t:column style="border:none; padding: 2px;">
                                <f:facet name="spacer">
                                    <f:verbatim>&amp;#160;</f:verbatim>
                                </f:facet>
                            </t:column>
                            <t:column>
                                <h:outputText value="#{fiscal.fullName}"/>
                            </t:column>
                            <t:column>
                                <a4j:commandLink actionListener="#{documentParallelBean.deleteFiscal}"
                                                 reRender="tbFiscals">
                                    <img src="#{contextPath}/images/delete-button.jpg"/>
                                    <f:param name="index" value="#{indx}"/>
                                </a4j:commandLink>
                            </t:column>
                        </t:dataTable>
                    </td>
                </tr>                
            </table>
            <br/>
            <h2>Miembros de mesa</h2>
            <table Id="tablamiembros" align="center">
                <tr>
                    <th>Ingrese nombre</th>
                    <th>Reportados</th>
                </tr>
                <tr>
                    <td width="25%">
                        <table width="100%">
                            <tr>
                                <td>
                                    <h:inputText id="memberName" value="#{documentParallelBean.memberName}"/>
                                    <label for="memberName">
                                        <a4j:commandLink actionListener="#{documentParallelBean.addMember}"
                                                         oncomplete="cleanMemberName();"
                                                         reRender="tbMembers">
                                            <img src="#{contextPath}/images/add-button-square.jpg"/>
                                        </a4j:commandLink>
                                    </label>
                                </td>
                            </tr>
                        </table>  
                    </td>
                    <td>
                        <t:dataTable id="tbMembers" value="#{documentParallelBean.members}" var="member" 
                                     renderedIfEmpty="true" rowIndexVar="indx"
                                     newspaperColumns="4" newspaperOrientation="horizontal">
                            <t:column style="border:none; padding: 2px;">
                                <f:facet name="spacer">
                                    <f:verbatim>&amp;#160;</f:verbatim>
                                </f:facet>
                            </t:column>
                            <t:column>
                                <h:outputText value="#{member.fullName}"/>
                            </t:column>
                            <t:column>
                                <a4j:commandLink actionListener="#{documentParallelBean.deleteMember}"
                                                 reRender="tbMembers">
                                    <img src="#{contextPath}/images/delete-button.jpg"/>
                                    <f:param name="index" value="#{indx}"/>
                                </a4j:commandLink>
                            </t:column>
                        </t:dataTable>
                    </td>
                </tr>                
            </table>
            <h:inputHidden id="operation" value="INGRESO"/>
            <h:inputHidden id="counting" value="#{documentParallelBean.counting}"/>
            <h:inputHidden id="electionType" value="#{documentParallelBean.electionType.id}"/>
            <h:inputHidden id="jrvHidden" value="#{documentParallelBean.jrv}">
                <f:converter converterId="objconverter"/>
            </h:inputHidden>
            <h:inputHidden id="ballotHidden" value="#{documentParallelBean.ballotCentre}">
                <f:converter converterId="objconverter"/>
            </h:inputHidden>
            <h:inputHidden id="fiscalCount" value="#{documentParallelBean.fiscalCount}"/>
            <h:inputHidden id="memberCount" value="#{documentParallelBean.memberCount}"/>
            <h:inputHidden id="fiscalTry" value="0"/>
            <h:inputHidden id="memberTry" value="0"/>
            <table align="center">
                <td><h:commandButton title="Guardar" action="#{documentParallelBean.save}"  image="/images/guardar.jpg" onclick="return validations();"/></td>
                <td><h:commandButton title="Reiniciar" action="#{documentParallelBean.reset}"  image="/images/refrescar.jpg"/></td>
            </table>
        </h:form>
        <script>
            cleanup();
        </script>
    </ui:define>    
</ui:composition>